import componentFactory from '@/factories/componentFactory'
import { setElId, getChildNode } from '@/helpers/recursiveMethods'
const state = {
  isLoadding: false,
  // 编辑器缩放级别
  editorZoom: 1,
  // 默认配置
  defalutOptions: {
    title: '',
    height: 1080,
    width: 1920,
    top: 16,
    left: 16
  },
  pages: [{
    id: 'mainPage', children: [
      {
        id: 'mainPage.div1',
        name: 'div',
        type: 'div',
        width: 300,
        height: 300,
        attrs: {
          hidden: false
        },
        classes: {},
        styles: {
          'overflow': 'hidden',
          'border-color': 'rgba(0, 0, 0, 0.15)',
          'border-style': 'solid',
          'border-width': '1px'
        }
      },
      {
        id: 'mainPage.div2',
        name: 'div2',
        type: 'div',
        width: 300,
        height: 300,
        attrs: {
          hidden: false
        },
        classes: {},
        styles: {
          'overflow': 'hidden',
          'border-color': 'rgba(0, 0, 0, 0.15)',
          'border-style': 'solid',
          'border-width': '1px'
        }
      }
    ], classes: []
  }],
  screenOptions: {
    title: '新建大屏',
    // 大屏设置
    showScreenConfig: false,
    scaleWay: 1,
    style: {
      height: 1080,
      width: 1920,
      top: 16,
      left: 16
    }
  },
  selectedElements: []
}

const mutations = {
  _updateEditorZoom: (state, currentZoom) => {
    state.editorZoom = currentZoom
  },
  _updateIsLoadding: (state, isLoadding) => {
    state.isLoadding = isLoadding
  },
  _updateShowScreenConfig: (state, showScreenConfig) => {
    state.screenOptions.showScreenConfig = showScreenConfig
  },
  _updateScreenOptions: (state, options) => {
    const { key, value } = options
    if (key === 'h') {
      state.screenOptions.style.height = value
    } else if (key === 'w') {
      state.screenOptions.style.width = value
    } else if (key === 's') {
      state.screenOptions.scaleWay = value
    }
  },
  _clearSelectedElements: (state) => {
    state.selectedElements = []
  },
  _addSelectedElements: (state, elements) => {
    state.selectedElements = elements
  },
  _addSelectedElement: (state, elem) => {
    state.selectedElements.push(elem)
  },
  _removeSelectedElement: (state, elemIndex) => {
    state.selectedElements.splice(elemIndex, 1)
  },
  createEgglement: (state, payload) => {
    payload.parent.children.push(payload.egglement)
  },
  deleteEgglement: (state, payload) => {
    payload.parent.children.splice(payload.eggIndex, 1)
  },
  updateEgglement: (state, payload) => {
    if ((typeof payload.left !== 'undefined') && (payload.left !== null)) payload.egglement.left = payload.left
    if ((typeof payload.top !== 'undefined') && (payload.top !== null)) payload.egglement.top = payload.top
    if ((typeof payload.right !== 'undefined') && (payload.right !== null)) payload.egglement.right = payload.right
    if ((typeof payload.bottom !== 'undefined') && (payload.bottom !== null)) payload.egglement.bottom = payload.bottom
    if ((typeof payload.zIndex !== 'undefined') && (payload.zIndex !== null)) payload.egglement.zIndex = payload.zIndex
    if ((typeof payload.height !== 'undefined') && (payload.height !== null)) payload.egglement.height = payload.height
    if ((typeof payload.width !== 'undefined') && (payload.width !== null)) payload.egglement.width = payload.width
    if ((typeof payload.text !== 'undefined') && (payload.text !== null)) payload.egglement.text = payload.text
    if (payload.classes) payload.egglement.classes = payload.classes
    if (payload.styles) payload.egglement.styles = payload.styles
    if (payload.attrs) payload.egglement.attrs = payload.attrs
  }

}
const actions = {
  registerElement({ getters, commit }, payload) {
    const parent = getters.getPageById(payload.pageId)
    const el = payload.el
    if (el.componegg) {
      if (!getters.componentExist(el.name)) {
        const componentRef = componentFactory.compRef(payload.el)
        commit('_saveComponentRef', setElId(componentRef))
      } else {
        const compIndex = getters.getComponentRefIndexByName(el.name)
        const newCount = getters.getComponentRefByIndex(compIndex).usageCount + 1
        commit('_updateComponentRef', { compIndex, newCount })
      }
    }

    const egglement = setElId(el, payload.pageId)
    commit('createEgglement', { parent, egglement })
  },
  removeElement({ getters, commit }, payload) {
    commit('_clearSelectedElements')
    const parentId = payload.elId.substring(0, payload.elId.lastIndexOf('.'))
    const parent = getChildNode(payload.page, parentId)
    const eggIndex = parent.children.findIndex(egg => egg.id === payload.elId)

    commit('deleteEgglement', { parent, eggIndex })
  },

  moveElement({ getters, dispatch, commit }, payload) {
    const page = getters.getPageById(payload.pageId)
    const egglement = getChildNode(page, payload.elId)
    commit('updateEgglement', {
      egglement,
      left: (egglement.left !== 'auto') ? payload.left : null,
      top: (egglement.top !== 'auto') ? payload.top : null,
      bottom: (egglement.bottom !== 'auto') ? payload.bottom : null,
      right: (egglement.right !== 'auto') ? payload.right : null
    })
  },
  rebaseSelectedElements({ getters, commit, state }) {
    const page = state.pages[0]
    const freshElements = state.selectedElements.map(el => getChildNode(page, el.id))
    commit('_clearSelectedElements')
    freshElements.map(el => commit('_addSelectedElement', el))
  },
  resizeElement({ getters, commit }, payload) {
    const page = getters.getPageById(payload.pageId)
    const egglement = getChildNode(page, payload.elId)

    if (
      payload.left !== egglement.left || payload.top !== egglement.top ||
        payload.right !== egglement.right || payload.bottom !== egglement.bottom ||
        payload.height !== egglement.height || payload.width !== egglement.width
    ) {
      commit('updateEgglement', {
        egglement,
        left: (egglement.left !== 'auto') ? payload.left : null,
        top: (egglement.top !== 'auto') ? payload.top : null,
        bottom: (egglement.bottom !== 'auto') ? payload.bottom : null,
        right: (egglement.right !== 'auto') ? payload.right : null,
        height: (egglement.height !== 'auto') ? payload.height : null,
        width: (egglement.width !== 'auto') ? payload.width : null
      })
    }
  }
}
const getters = {
  getPageIndexById: (state) => (id) => {
    return state.pages.findIndex(page => page.id === id)
  },
  getPageById: (state, getters) => (id) => {
    const pageIndex = getters.getPageIndexById(id)
    return state.pages[pageIndex]
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
